<template>
  <van-nav-bar fixed="fixed"
      v-if="!NOT_SHOW_NAVBAR_AND_TABBAR.includes(route.path)"
      :title="title"
      left-arrow
      @click-left="onClickLeft"
  >
<!--          @click-right="onClickRight"
-->
<!--    <template v-if="route.path ==='/friends'|| !SHOW_SEARCH.includes(route.path)" #right>-->
<!--      <van-badge :content="applyFriendsCount" v-if="applyFriendsCount>0">-->
<!--        <notice/>-->
<!--      </van-badge>-->
<!--      <notice v-else/>-->
<!--    </template>-->

<!--    <template  v-else  #right>-->
    <template  #right>
      <van-popover v-model:show="showPopover" @select="onSelect" :actions="actions" placement="bottom-end">
        <template #reference>
          <van-icon name="add-o" size="18"/>
        </template>
      </van-popover>
    </template>
<!--    <template  v-else  #right>-->
<!--      <van-icon name="search" size="18" />-->
<!--    </template>-->
  </van-nav-bar>

  <div id="center">
    <router-view />
  </div>



  <van-tabbar route  v-if="!NOT_SHOW_NAVBAR_AND_TABBAR.includes(route.path) && !NOT_SHOW_TABBAR.includes(route.path)" @change="onChange">
    <van-tabbar-item to="/" icon="home-o" name="index">主页</van-tabbar-item>
    <van-tabbar-item icon="friends-o" name="friends" :badge="applyFriendsCount<=0?null:applyFriendsCount" replace
                     to="/friends">好友
    </van-tabbar-item>
    <van-tabbar-item icon="chat-o" name="chat" replace to="/public_chat">聊天厅</van-tabbar-item>
    <van-tabbar-item to="/team" icon="search" name="team">队伍</van-tabbar-item>
    <van-tabbar-item to="/user" icon="friends-o" name="user">个人</van-tabbar-item>
  </van-tabbar>

</template>

<script setup lang="ts">


import 'vant/es/toast/style';
import {useRoute,useRouter} from 'vue-router';
import {onMounted, ref} from "vue";
import routers from "../config/router.ts";
import myAxios from "../plugins/myAxios.ts";
import qs from "qs";





const router = useRouter();
const route = useRoute()
const applyFriendsCount = ref(0)
const recordId = ref([])

const DEFAULT_TITLE = '伙伴匹配';
const title = ref(DEFAULT_TITLE);
const NOT_SHOW_NAVBAR_AND_TABBAR = ["/user/login", '/user/register']
const NOT_SHOW_TABBAR = ["/chat", '/public_chat']
//
const SHOW_SEARCH = ["/", '/team', '/public_chat', '/user', '/apply']

const showPopover = ref(false);
const actions = [
  { text: '搜索用户', icon: 'search' },
  { text: '附近用户', icon: 'location-o' },
  { text: '消息中心', icon: 'envelop-o' },
];


/**
 * 根据路由切换标题
 */
routers.beforeEach((to) => {
  title.value = to.meta.title || DEFAULT_TITLE;
})


const onSelect = (item) => {

  console.log(item.text);
  if(item.text === "搜索用户"){
    router.push("/search");
  }else if(item.text === "附近用户"){
    router.push("/user/matchNearby");
  }else{
    const read = myAxios.get("/friends/read", {
      params: {
        ids: recordId.value
      }, paramsSerializer: {
        serialize: (params) => {
          return qs.stringify(params, {indices: false})
        }
      }
    })
    if (read.data) {
      recordId.value.length = 0
      applyFriendsCount.value = 0
    }
    router.push("/apply")
  }
};


const onClickLeft = () => router.back();
const onClickRight = async () => {
  if (!SHOW_SEARCH.includes(route.path)) {
    const read = await myAxios.get("/friends/read", {
      params: {
        ids: recordId.value
      }, paramsSerializer: {
        serialize: (params) => {
          return qs.stringify(params, {indices: false})
        }
      }
    })
    if (read.data) {
      recordId.value.length = 0
      applyFriendsCount.value = 0
    }
    await router.push("/apply")
  } else {
    await router.push("/search")
  }
};

//查询出当前用户收到的所有申请、同意记录
const getRecord =async () => {
  const records = await myAxios.get("/friends/getRecords")
  records.data.forEach(record => {
    if (record.status == 0) {
      recordId.value.push(record.id)
    }
  })
}

onMounted(async () => {
//   const urlParams = new URLSearchParams(window.location.search);
//   const code = urlParams.get('code');
//   if (code){
//     const data = await myAxios.post("/login/loginInfo", {
//       code: code
//     })
//
//   }
  if (route.path!=="/"){
    applyFriendsCount.value = await onChange()
    await getRecord()
  }
})
const active = ref('name');

const onChange = async () => {
  if (active.value === "friends") {
    await getRecord()
  }
   const res= await myAxios.get("/friends/getRecordCount")
   applyFriendsCount.value = res.data
  return res.data
}




</script>

<style scoped>

#center {
  margin-top: 48px;
  padding-bottom: 60px;
}
</style>


